<template>
	<view class="addCar">
		<image src="/static/my/组 4@2x.png"></image>
		<view class="content">
			<form @submit.prevent="formSubmit" @reset="formReset">
				<view class="uni-form-item">
					<view class="form-row">
						<text class="title">车辆类型：</text>
						<picker mode="selector" :range="carTypes" v-model="selectedCarType" style="width: 400rpx;">
							<view class="picker">{{ carTypes[selectedCarType] }}</view>
						</picker>
					</view>
				</view>
				<view class="uni-form-item">
					<view class="form-row">
						<view class="title">车辆型号：</view>
						<picker mode="selector" :range="carModels" v-model="selectedCarModel" style="width: 400rpx;">
							<view class="picker">{{ carModels[selectedCarModel] }}</view>
						</picker>
					</view>
				</view>
				<view class="uni-form-item">
					<view class="form-row">
						<view class="title">车牌号码：</view>
						<input class="uni-input" v-model="licensePlate" placeholder="请输入车牌号" style="width: 380rpx;" />
					</view>
				</view>
				<view class="uni-form-item">
					<view class="form-row">
						<view class="title">车主姓名：</view>
						<input class="uni-input" v-model="ownerName" placeholder="请输入车主姓名" style="width: 380rpx;" />
					</view>
				</view>
				<view class="uni-form-item">
					<view class="form-row">
						<view class="title">电话号码：</view>
						<input class="uni-input" v-model="phoneNumber" placeholder="请输入电话号码" style="width: 380rpx;" />
					</view>
				</view>
				<view class="uni-form-item">
					<view class="form-row">
						<view class="title">上传照片：</view>
						<uni-file-picker :image-styles="imageStyles" v-model="imageValue" fileMediatype="image"
							mode="grid" @select="select" limit="1"></uni-file-picker>
					</view>
				</view>
				<view class="uni-btn-v">
					<button form-type="submit" class="submit-button">添加</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageStyles: {
					height: 100,
					width: 100
				},

				carTypes: ['请选择', '轿车', 'SUV', 'MPV'],
				carModels: ['请选择', '奔驰', '宝马', '奥迪'],
				selectedCarType: 0,
				selectedCarModel: 0,
				licensePlate: '',
				ownerName: '',
				phoneNumber: '',
				imageValue: [] // 存储上传的图片
			};
		},
		onLoad() {
			this.fetchCarTypes();
			this.fetchCarModels();
		},
		methods: {
			async fetchCarTypes() {
				// try {
				// 	const response = await uni.request({
				// 		url: 'https://your-api-endpoint.com/api/carTypes', // 替换为你的接口地址
				// 		method: 'GET'
				// 	});
				// 	this.carTypes = response[1].data; // 假设返回的数据是一个数组
				// } catch (error) {
				// 	console.error('获取车辆类型失败', error);
				// }
			},
			async fetchCarModels() {
				// try {
				// 	const response = await uni.request({
				// 		url: 'https://your-api-endpoint.com/api/carModels', // 替换为你的接口地址
				// 		method: 'GET'
				// 	});
				// 	this.carModels = response[1].data; // 假设返回的数据是一个数组
				// } catch (error) {
				// 	console.error('获取车辆型号失败', error);
				// }
			},
			formSubmit() {
				const formData = {
					carType: this.carTypes[this.selectedCarType],
					carModel: this.carModels[this.selectedCarModel],
					licensePlate: this.licensePlate,
					ownerName: this.ownerName,
					phoneNumber: this.phoneNumber,
					image: this.imageValue[0] // 假设只上传一张图片
				};
				// 提交表单数据
				uni.request({
					url: 'https://your-api-endpoint.com/api/addCar', // 替换为你的接口地址
					method: 'POST',
					data: formData,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.navigateTo({
								url: "/pages/my/addCarSuccess/addCarSuccess"
							});
						} else {
							console.error('添加车辆失败', res.data);
						}
					},
					fail: (error) => {
						console.error('请求失败', error);
					}
				});
			},
			formReset() {
				console.log('清空数据');
				this.licensePlate = '';
				this.ownerName = '';
				this.phoneNumber = '';
				this.selectedCarType = 0;
				this.selectedCarModel = 0;
				this.imageValue = [];
			},
			select(e) {
				const tempFilePaths = e.tempFilePaths;
				const imgUrl = tempFilePaths[0];
				uni.uploadFile({
					url: 'https://your-api-endpoint.com/api/uploadpic/', // 替换为你的上传接口地址
					filePath: imgUrl,
					name: 'imgUrl',
					header: {
						"Content-Type": "multipart/form-data"
					},
					success: (uploadFileRes) => {
						const path = JSON.parse(uploadFileRes.data);
						this.imageValue.push(path.imgUrl); // 假设返回的图片地址
					}
				});
			}
		}
	};
</script>

<style>
	.addCar {
		position: relative;
		margin: auto;
	}

	.content {
		position: absolute;
		left: 100rpx;
		top: 400rpx;
	}

	.uni-form-item {
		margin-bottom: 40rpx;
	}

	.form-row {
		display: flex;
		align-items: center;
	}

	.title {
		font-size: 16px;
		color: #333;
		margin-right: 10rpx;
	}

	.picker {
		border: 1px solid #ccc;
		padding: 10rpx;
		border-radius: 5rpx;
		background-color: #f9f9f9;
		flex: 1;
	}

	.uni-input {
		border: 1px solid #ccc;
		padding: 10rpx;
		border-radius: 5rpx;
		width: 100%;
	}

	.uni-btn-v {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.submit-button {
		margin-top: 100rpx;
		background-color: #297BF6;
		border-radius: 5rpx;
		color: white;
		padding: 10rpx;
		width: 60%;
		height: 80rpx;
		line-height: 60rpx;
	}
</style>